<template>
  <div class="footer-container">
    <div class="footer-box">
      <div class="address-box">
        <h3>Address</h3>
        <div class="address-line">
          <div class="icon-box">
            <el-icon><ep-LocationInformation /></el-icon>
          </div>
          <p>123 Street,New York,USA</p>
        </div>
        <div class="address-line">
          <div class="icon-box">
            <el-icon><ep-PhoneFilled /></el-icon>
          </div>
          <p>+012 345 67890</p>
        </div>
        <div class="address-line">
          <div class="icon-box">
            <el-icon><ep-Message /></el-icon>
          </div>
          <p>info@example.com</p>
        </div>
      </div>
      <div class="service-box">
        <h3>Services</h3>
        <p>Air Freight</p>
        <p>Sea Freight</p>
        <p>Road Freight</p>
        <p>Logistics Solutions</p>
        <p>Industry Solutions</p>
      </div>
      <div class="quick-link-box">
        <h3>Quick Links</h3>
        <p>About Us</p>
        <p>Contact Us</p>
        <p>Our Services</p>
        <p>Team &amp; Condition</p>
        <p>Support</p>
      </div>
      <div class="news-letter-box">
        <h3>NewsLetter</h3>
        <p>Dolor amet sit justo amet elitr clita ipsum elitr est.</p>
        <div class="input-box">
          <input type="text" placeholder="Your Email">
          <div class="signup-btn">Sign Up</div>
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <div class="copyright">
      <p>Copyright &copy; Company Name, Inc. All Rights Reserved</p>
    </div>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
$base-color: #ff3e41;
.footer-container {
  padding-top: 87px;
  padding-bottom: 24px;
  text-align: left;
  background-color: #232323;
  color: #ffffff;

  .footer-box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 24px;

    h3 {
      margin-bottom: 24px;
    }

    .address-line {
      padding: 7px 0;
      display: flex;
      .icon-box {
        margin-right: 17px;
      }
    }

    .service-box, .quick-link-box {
      p::before {
        content: '>';
        margin-right: 12px;
        font-style: bold;
      }

      p {
        padding: 7px 0;
      }
    }

    .news-letter-box {
      width: 270px;

      p {
        margin-bottom: 7px;
      }

      .input-box {
        position: relative;
        width: 270px;
        height: 47px;
        background-color: #ffffff;

        input {
          outline: none;
          border: none;
          background-color: #ffffff;
          /*line-height: 37px;*/
          height: 42px;
          line-height: 37px;
          padding-left: 18px;
          box-sizing: border-box;
        }

        .signup-btn {
          padding: 0px 12px;
          line-height: 42px;
          height: 37px;
          position: absolute;
          top: 3px;
          right: 7px;
          background-color: $base-color;
        }
      }
    }
  }

  .divider-line {
    width: 1200px;
    height: 1px;
    margin: 0 auto;
    background-color: #AFAFAF;
  }

  .copyright {
      padding-top: 24px;
      text-align: center;
  }
}
</style>
